<template>
    <div>
        <h-collapse>
            <template #title>
                <flexbox class="title">
                    <span>版本能效分析</span>
                    <!-- <img class="margin-l-8" src="@/assets/images/chart/tooltip.png" @click.stop="handleShowTipModal" /> -->
                </flexbox>
            </template>
            <div class="card hover-shadow">
                <div style="margin-top: 12px">
                    <a-form layout="inline" :model="form">
                        <a-row>
                            <a-col :span="7">
                                <a-form-item label="选择时间">
                                    <h-range-picker-cell
                                        :allowClear="false"
                                        :value="[
                                            form['startTime'] ? $moment(form['startTime'], 'YYYY-MM-DD') : null,
                                            form['endTime'] ? $moment(form['endTime'], 'YYYY-MM-DD') : null,
                                        ]"
                                        @change="rangeDateChange"
                                    />
                                </a-form-item>
                            </a-col>
                            <a-col :span="7">
                                <a-form-item label="选择系统">
                                    <flexbox>
                                        <h-search-select-cell
                                            :default-value="$filters.valToNameFilter('fromSystem', form.systemId)"
                                            type="platformSystem"
                                            :searchQuery="{ isOutsideSystem: 0 }"
                                            label="systemName"
                                            @success="handleSelectChange"
                                            ref="searchSelectRef"
                                        />
                                        <ReloadOutlined class="margin-l-8" @click="handleRefresh" />
                                    </flexbox>
                                </a-form-item>
                            </a-col>
                        </a-row>
                    </a-form>
                </div>
                <div class="card-cont">
                    <h-bar-chart :option="versionOption" />
                </div>
            </div>
        </h-collapse>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { ReloadOutlined } from '@ant-design/icons-vue';
import store from '@/store';
import defaultSettings from '@/config/defaultSettings';
import moment from 'moment';
import { HRangePickerCell, HSearchSelectCell } from '@/components';
import HCollapse from '@/views/insideCharts/pmpAndJiraChart/pmpChart/components/HCollapse.vue';
import { HBarChart } from '@/components';
import { defineComponent, reactive, toRefs } from 'vue';
export default defineComponent({
    components: {
        HBarChart,
        HCollapse,
        HRangePickerCell,
        HSearchSelectCell,
        ReloadOutlined
    },
    setup() {
        const state = reactive<any>({
            versionOption: {},
            form: {
                systemId: '',
                // startTime: moment()
                //     .year(moment().year() - 1)
                //     .startOf('year')
                //     .format('YYYY-MM-DD HH:mm:ss'),
                // endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
                startTime: moment().subtract(3, 'months').format('YYYY-MM-DD HH:mm:ss'),
                endTime: moment().format('YYYY-MM-DD HH:mm:ss')
            },
            list: []
        });
        const handleSelectChange = (val) => {
            state.form.systemId = val.id;
            getData();
        };
        const rangeDateChange = (val) => {
            const { startTime, endTime } = val;
            if (state.form.startTime !== startTime || state.form.endTime !== endTime) {
                state.form.startTime = startTime;
                state.form.endTime = endTime;
                getData();
            }
        };
        const getData = async () => {
            const query = {
                ...state.form
            };
            const { success, moule } = await api.efficiencyStatisticsModel.getVersionStatisticsTendency(query);
            if (success) {
                state.list = [...moule];
            }
            initData();
        };
        const handleRefresh = () => {
            initSystem();
            getData();
        };
        const initData = () => {
            const versionNameArr = state.list.map((item) => item.versionName);
            const aArr = state.list.map((item) => item.effectiveProductionTime);
            const bArr = state.list.map((item) => item.planWorkHours);
            const usePercentArr = state.list.map((item) => item.usePercent * 100);
            state.versionOption = {
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    },
                    formatter: '{b} <br /> {a0}: {c0}<br />{a1}: {c1} <br /> {a2}: {c2}' + '%'
                },
                legend: {
                    x: 'center',
                    y: 'bottom',
                    data: ['实际工时', '预估工时']
                },
                xArr: [...versionNameArr],
                yAxis: [
                    {
                        name: '工\n时\n\n小\n时\n\nh \n',
                        type: 'value',
                        nameLocation: 'center', // 垂直居中
                        nameRotate: 0, // 旋转90度
                        nameGap: 80 // 距离y轴距离
                    },
                    {
                        name: '利\n用\n率\n\n%\n',
                        type: 'value',
                        position: 'right',
                        nameLocation: 'center', // 垂直居中
                        nameRotate: 0, // 旋转90度
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: '#FF9845'
                            }
                        },
                        axisLabel: {
                            formatter: '{value} %'
                        },
                        min: 0,
                        max: 300,
                        nameGap: 80 // 距离y轴距离
                    }
                ],
                series: [
                    {
                        name: '实际工时',
                        data: [...aArr],
                        type: 'bar',
                        barWidth: 10
                    },
                    {
                        name: '预估工时',
                        data: [...bArr],
                        type: 'bar',
                        barWidth: 10
                    },
                    {
                        name: '利用率%',
                        type: 'line',
                        data: [...usePercentArr]
                    }
                ]
            };
        };
        // 初始系统
        const initSystem = () => {
            // let systemArr = store.getters.dicOptions.fromSystem.filter((item) => item.isOutsideSystem === '0');
            // if (systemArr.length) {
            //     state.form.systemId = systemArr[0].id;
            // }
            const { production } = defaultSettings;
            state.form.systemId = production ? 75 : 26;
        };
        initSystem();
        getData();
        return {
            ...toRefs(state),
            rangeDateChange,
            handleSelectChange,
            handleRefresh
        };
    }
});
</script>

<style scoped lang="less">
.card {
    min-height: 372px;
    overflow: hidden;
    position: relative;
    background-color: #fff;
    border-radius: 4px;
    cursor: pointer;
    &-cont {
        padding: 24px;
        height: 648px;
    }
}
</style>